<template>
  <div>
    <el-row v-loading="loading" :gutter="24" style="margin-top: 0px">
      <el-col :span="12">
        <el-row>
          <piechart
            :id="'part1'"
            :chart-data="part1"
            :width="'100%'"
            :colors="['#16afcc', '#fa4343', '#2F4F4F']"
          />
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row>
          <piechart
            :id="'part2'"
            :chart-data="part2"
            :width="'100%'"
            :colors="['#16afcc', '#fa4343', '#2F4F4F']"
          />
        </el-row>
      </el-col>
    </el-row>
    <el-row v-loading="loading" :gutter="24" style="margin-top: 0px">
      <el-col :span="12">
        <el-row>
          <piechart
            :id="'part3'"
            :chart-data="part3"
            :width="'100%'"
            :colors="['#16afcc', '#fa4343', '#2F4F4F']"
          />
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row>
          <piechart
            :id="'part4'"
            :chart-data="part4"
            :width="'100%'"
            :colors="['#16afcc', '#fa4343', '#2F4F4F']"
          />
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <span style="font-size:20px;margin-left:10px;" class="mark">数据检查:{{ result }}</span>
    </el-row>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import piechart from './components/PieChart'
import { bugDataLastWeek } from '@/api/quality_visualization'
export default {
  components: {
    piechart
  },
  data() {
    return {
      part1: [],
      part2: [],
      part3: [],
      part4: [],
      loading: false,
      result: ''
    }
  },
  created() {
    this.getBugDataLastWeek()
  },

  methods: {
    getBugDataLastWeek() {
      this.loading = true
      bugDataLastWeek()
        .then((res) => {
          this._data.part1 = ['上周bug严重级别分布', res.data.severity]
          this._data.part2 = ['上周bug平台分布', res.data.platform]
          this._data.part3 = ['上周bug类型分布', res.data.category]
          this._data.part4 = ['上周bug处理情况', res.data.status]
          this.result = res.data.result
          this.loading = false
        })
        .catch((err) => {
          Message.error(err.msg || err.message || err.value)
          this.loading = true
        })
    }
  }
}
</script>
